<template>
  <div>
    <nav-bar class="home-nav">
        <div slot="left" class="back" @click="backClick">
            <img src="~assets/img/common/back.svg"/>
        </div>
        <div slot="center" class="title">
            <div v-for="(item,index) in titles" :key="index" 
            class="title-item"
            :class="{active:index === currentIndex}"
            @click="titleClick(index)">{{item}}</div>
        </div>
        </nav-bar>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
export default {
  components: { 
    NavBar 
  },
name:'DetailNavBar',
data(){
    return {
        titles:['商品','参数','评论','推荐'],
        //当前默认选中的按钮
        currentIndex: 0,
    }
},
methods:{
    titleClick(index){
      // console.log(index);
        this.currentIndex = index;
        this.$emit('titleClick', index);
    },
    backClick(){
     this.$router.go(-1);
    }
}
}
</script>

<style>
.title{
    display: flex;
    font-size: 13px;
}
.title-item{
    flex:1;
}
/* 默认颜色 */
.active{
    color:var(--color-high-text)
}

/* back */
.back img {
    margin-top: 12px;
}
.home-nav {
    background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;

}
</style>